<template>
    <div class="reset">
        <!-- logo和背景图片区域 -->
        <Logo></Logo>
        <!-- 手机号码和登录密码 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                
                 <!-- 手机号码输入框 -->
                <img class="icon_phone" src="@/assets/img/icon_phone.png" alt="">
                <van-field
                    v-model="resetMsg.mobile"
                    name="mobile"
                    placeholder="请输入手机号码"
                    :rules="[{ validator: validatorPhone }]"
                />

                <!-- 验证码输入框 -->
                <img class="icon_verification" src="@/assets/img/icon_verification@2x.png" alt="">
                <van-field
                  v-model="resetMsg.code"
                  name="code"
                  center
                  clearable
                  placeholder="请输入六位验证码"
                  :rules="[{ validator: validatorVeriCode }]"
                >
                  <template #button>
                    <van-button size="small" type="primary" color="#FF8094" v-if="butShow" @click="sendVeriCode">发送验证码</van-button>
                    <van-button size="small" type="primary" color="#FF8094" v-if="!butShow" disabled>{{count}}</van-button>
                  </template>
                </van-field>


                <!-- 重置密码输入框 -->
                <img class="icon_lock" src="@/assets/img/icon_lock@2x.png" alt="">
                <van-field
                    v-model="resetMsg.password"
                    name="password"
                    placeholder="请重新设置密码"
                    :rules="[{ validator: validatorPassword }]"
                    type="password"
                />
            </van-cell-group>

            <!-- 提交按钮 -->
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                提交
                </van-button>
            </div>

            <!-- 语音验证码 -->
            <div class="tip">
                收不到验证码?试试语音验证码
            </div>      
        </van-form>

        <!-- 遮罩层 -->
        <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
        <van-popup v-model:show="show" @click="toLogin"  @click-overlay="toLogin" round>
          <div class="mask">
            <div>重置密码成功</div>
            <div>现转到登录页面重新登录</div>
          </div>
        </van-popup>
    </div>
</template>

<script setup>
    //引入组件
    import Logo from './loginComponents/logo.vue'
    //引入composition api
    import { ref,reactive } from 'vue';
    import { useRouter } from 'vue-router'
    import useLoginStore from '@/store/login'
    import { showDialog} from 'vant';
    import { setResetVer,setResetPass } from '@/api'
    const LoginStore = useLoginStore()
    const router = useRouter()
    //定义手机号码、密码、验证码等数据
    let resetMsg = reactive({
      id:null,
      code : null,
      mobile : null,
      password : null,
    })
    let result = ref(null)
    //定义show判断发送验证码按钮是否倒计时
    const butShow = ref(true)
    //定义倒计时
    let count = ref(60)
    //用于存计时器返回值
    let timer = null
    //show用于判断是否弹出遮罩层
      // let show = ref(true)
    let show = ref(false)


     // 校验函数可以直接返回一段错误提示
     //校验手机号
     const validatorPhone = (val) => {
      if(!val){
        return '手机号码不能为空'
      }else if(!LoginStore.reg_phone.test(val)){
        return `${val} 不合规,请重新输入11位手机号码`;
      }
    }
    // 校验密码
    const validatorPassword = (val) => {
      if(!val){
        return '密码不能为空'
      }else if(!LoginStore.reg_password.test(val)){
        return `${val} 不合规,请重新输入6~16位数字加字母`;
      }
    }
    //校验验证码
    const validatorVeriCode = (val) => {
      if(!val){
        return '验证码不能为空'
      }else if(!LoginStore.reg_veriCode.test(val)){
        return `${val} 不合规,请重新输入6位数字`;
      }
    }

    //提交按钮
    const onSubmit = (values) => {
      console.log('submit', values);
      if(values.code == result.user.code){
        if(values.mobile == result.user.mobile){
          // 验证成功
          let res = setResetPass(resetMsg)
          console.log(res)
          show.value = true
        }else{
          showDialog({
            title: '错误',
            message: `手机号码错误`,
          })
        }
      }else{
        showDialog({
        title: '错误',
        message: `验证码错误`,
        })
      }

    };
    //点击弹出层时跳转到登录页面
    const toLogin = () => {
      router.push('/login')
    }

    //发送验证码
    const sendVeriCode = async() => {
        //如何输入了手机号则发送验证码请求并做倒计时
        result = await setResetVer({
          mobile:resetMsg.mobile,
        })
        resetMsg.id = result.user.id;

        if(result.code == 200){
              // 模拟手机接收到短信
            setTimeout(()=>{
              showDialog({
              title: '验证码',
              message: `您的验证码是${result.user.code}`,
              })
            },4000)
            //调整按钮样式，倒计时
            const TIME_COUNT = 60;
            if(!timer){
              count.value = TIME_COUNT;
              butShow.value = false;
              timer = setInterval(()=>{
                if(count.value>0 && count.value <= TIME_COUNT){
                  count.value -- ;
                }else{
                  butShow.value = true;
                  clearInterval(timer);
                  timer = null
                }
              },1000)
            }
        }
    }
</script>

<style scoped>
.reset{
    display: flex;
    align-items: center;
    flex-direction: column;
    /* justify-content: space-between; */
  }
  /* 整个输入框盒子的样式 */
  :deep(.van-cell-group--inset){
   width: 337px;
   position: relative;
   margin-top: 50px;
  }
  :deep(.van-cell){
    border-bottom: 2px solid rgb(238, 238, 238);
    padding-bottom: 4px;
    line-height: 40px;
    position: relative;
  }
  /* 每个输入框的样式 */
  :deep(.van-field__control ){
    padding-top: 10px;
    height: 40px;
    padding-left: 50px;
    font-size: 18px;
  }
  /* 按钮样式 */
  :deep(.van-button--round){
    background-color:#FF8094 ;
    border: none;
    width: 300px;
    margin: auto;
    margin-top: 90px;
  }
  /* 错误信息样式 */
  :deep(.van-field__error-message){
    position:fixed;
    /* top: 40px;
    left:40px; */
    z-index: 200;
    left: 80px;
  }
  .icon_phone{
    width: 12px;
    z-index: 10;
    position: absolute;
    top: 24px;
    left: 8px;
  }
  .icon_verification{
    width: 19px;
    z-index: 10;
    position: absolute;
    top: 80px;
    left:5px
  }
  .icon_lock{
    width: 19px;
    z-index: 10;
    position: absolute;
    top: 135px;
    left: 5px;
  }
  .tip{
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 11px;
    color: rgb(102, 102, 102);
  }
  .mask{
    width: 230px;
    height: 110px;
    border-radius: 20%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
  }
  .mask>div:first-child{
    width: 100%;
    height: 55px;
    color: #333;
    font-family: PingFang TC;
    font-weight: 600;
    font-size: 18px;
    line-height: 56px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .mask>div:last-child{
    width: 100%;
    height: 54px;
    color: #999;
    font-family: PingFang TC;
    font-size: 14px;
    line-height: 54px;
    text-align: center;
  }
</style>